<template>
  <div class="video-recruitment">
    <el-card>
      <el-tabs v-model="activeTab" class="recruitment-tabs">
        <el-tab-pane label="我的视频" name="myVideos">
          <div v-if="videoHireList.length === 0" class="el-empty">
            <el-empty description="没有找到对应的数据"></el-empty>
            <div>
              <el-button type="primary" @click="releaseVideoHire"
                >发布视频招聘</el-button
              >
            </div>
          </div>

          <div v-else class="video-list">
            <div
              v-for="item in videoHireList"
              :key="item.id"
              class="video-item"
            >
              <div class="video-date">
                <i class="el-icon-time"></i>
                {{ item.addtime | dateFormat }}
              </div>

              <div class="video-content">
                <div class="video-company">
                  <div
                    @click="videoClick(item)"
                    style="width: 60px; height: 50px"
                  >
                    <image :size="50" :src="thumbnailUrl">
                      <!-- <img
                        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                      /> -->
                    </image>
                  </div>
                  <div class="company-info">
                    <div class="company-title">{{ item.title }}</div>
                    <div class="video-stats">
                      <span>播放：{{ item.viewCount }}次</span>
                      <span class="divider">|</span>
                      <span>被收藏：{{ item.like }}次</span>
                    </div>
                  </div>
                </div>

                <div class="video-actions">
                  <el-button type="text" @click="handleEdit(item)"
                    >修改</el-button
                  >
                  <el-button
                    v-if="item.isPublic === 2"
                    type="text"
                    @click="handleClose(item)"
                    >关闭</el-button
                  >
                  <el-button v-else type="text" @click="handleClose(item)"
                    >开启</el-button
                  >
                  <el-button type="text" @click="handleDelete(item.id)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="我的收藏" name="myCollections">
          <el-empty description="没有找到对应的数据"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 视频弹框 -->
    <el-dialog title="" :visible.sync="videoVisible" width="width">
      <div>
        <video :src="videoUrl" controls="controls"></video>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button
          style="width: 110px; height: 36px"
          @click="videoVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import videojs from "video.js";
// import "video.js/dist/video-js.css";
// import "videojs - screenshot";
import {
  selCompanyVideoListApi,
  updateVideoPublicByIdApi,
  updateVideoByIdApi,
} from "@/api/videoHire";
import { mapGetters } from "vuex";
export default {
  name: "VideoRecruitment",
  data() {
    return {
      activeTab: "myVideos",
      // 视频招聘请求参数
      videoHireQuery: {
        page: 1,
        pagesize: 10,
        uid: "",
      },
      videoUrl: "",
      // 企业视频管理列表
      videoHireList: [],
      videoVisible: false,
      // 删除
      updateVideoQuery: {
        id: "",
        type: 1,
      },
      thumbnailUrl:'',
      baseUrl: "http://192.168.11.22:38084",
    };
  },

  computed: {
    ...mapGetters(["userId"]),
  },

  created() {
    this.videoHireQuery.uid = this.userId;
    this.selCompanyVideoList();
  },
  mounted() {
    // this.handleVideo() 
  },
  methods: {
    // 点击图片
    videoClick(item) {
      this.videoVisible = true;
      this.videoUrl = this.baseUrl + item.videoSrc;
    },
    // 获取视频第一帧
    getVideoBase64(url) {
      console.log(url);
      return new Promise((resolve, reject) => {
        const video = document.createElement("video");
        video.setAttribute("crossOrigin", "anonymous");
        video.setAttribute("src", url);
        video.setAttribute("width", 200);
        video.setAttribute("height", 112);
        video.setAttribute("preload", "metadata");

        video.addEventListener("loadeddata", () => {
          try {
            const canvas = document.createElement("canvas");
            canvas.width = video.width;
            canvas.height = video.height;

            const ctx = canvas.getContext("2d");
            video.currentTime = 0.1;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            const dataURL = canvas.toDataURL('image/jpeg');
            resolve(dataURL);
            console.log(dataURL)
          } catch (error) {
            reject(error);
          }
        });

        // video.addEventListener("error", (e) => {
        //   reject(new Error("视频加载失败"));
        // });

        // setTimeout(() => {
        //   reject(new Error("缩略图生成超时"));
        // }, 10000);
      });
    },
    // 视频列表查询
    async selCompanyVideoList() {
      try {
        const res = await selCompanyVideoListApi(this.videoHireQuery);
        this.videoHireList = res.records;

        // 为每个视频生成缩略图
        for (const item of this.videoHireList) {
          if (item.videoSrc) {
            try {
              const videoUrl = this.baseUrl + item.videoSrc;
              this.thumbnailUrl = await this.getVideoBase64(videoUrl);
              console.log(this.thumbnailUrl);
            } catch (error) {
              console.error("生成缩略图失败:", error);
              // this.thumbnailUrl = "path/to/default/thumbnail.jpg"; // 建议设置一个默认缩略图
            }
          }
        }
      } catch (error) {
        console.error("获取视频列表失败:", error);
        this.$message.error("获取视频列表失败");
      }
    },

    releaseVideoHire() {
      this.$router.push({
        name: "video_management",
      });
    },

    handleEdit(item) {
      console.log("Edit video:", item.id);
    },
    // 关闭视频招聘
    handleClose(item) {
      console.log(item);
      this.updateVideoQuery.id = item.id;
      this.updateVideoQuery.type = 2;
      const actionText = item.isPublic === 1 ? "关闭" : "开启";
      this.$confirm(`确认${actionText}该视频招聘?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await updateVideoPublicByIdApi(this.updateVideoQuery);
          console.log(res);
          if (res.code === 1) {
            this.$message.success(
              item.isPublic === 1 ? "关闭成功!" : "开启成功!"
            );
            this.selCompanyVideoList();
          } else {
            this.$message.error(
              item.isPublic === 1 ? "关闭失败!" : "开启失败!"
            );
          }
        })
        .catch(() => {
          this.$message.error(item.isPublic === 1 ? "关闭失败!" : "开启失败!");
        });
    },
    // 删除视频招聘
    handleDelete(id) {
      this.updateVideoQuery.id = id;
      this.$confirm("视频删除后不可恢复,确定要删除吗?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            console.log(id);
            const res = await updateVideoPublicByIdApi(this.updateVideoQuery);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.selCompanyVideoList();
            } else {
              this.$message.error("删除失败!");
            }
          } catch {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.video-recruitment {
  padding: 20px;
}

.video-list {
  padding: 0 20px;
}

.video-item {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 0;
}

.video-item:last-child {
  border-bottom: none;
}

.video-date {
  color: #909399;
  font-size: 14px;
  margin-bottom: 15px;
}

.video-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-company {
  display: flex;
  align-items: center;
  gap: 15px;
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.company-title {
  font-size: 14px;
  color: #303133;
}

.video-stats {
  font-size: 12px;
  color: #909399;
}

.video-stats .divider {
  margin: 0 8px;
  color: #dcdfe6;
}

.video-actions {
  display: flex;
  gap: 15px;
}

:deep(.el-button--text) {
  padding: 0;
  font-size: 14px;
}

:deep(.el-button--text:hover) {
  color: #409eff;
}
</style>
